
<template>

    <body
        class="bg-gradient-to-br from-primary to-accent min-h-screen flex items-center justify-center p-4 font-q overflow-hidden">
        <!-- 装饰性浮动元素 -->
        <div class="absolute top-10 left-10 w-20 h-20 bg-light rounded-full opacity-20 animate-float"></div>
        <div class="absolute bottom-20 right-10 w-32 h-32 bg-accent rounded-full opacity-20 animate-float"
            style="animation-delay: 1s"></div>
        <div class="absolute top-1/3 right-1/4 w-16 h-16 bg-primary rounded-full opacity-30 animate-float"
            style="animation-delay: 2s"></div>
        <div class="absolute bottom-1/4 left-1/3 w-24 h-24 bg-light rounded-full opacity-20 animate-float"
            style="animation-delay: 1.5s"></div>

        <!-- 主容器 -->
        <div class="relative w-full max-w-4xl">
            <!-- 卡片容器 -->
            <div class="bg-glass rounded-3xl p-6 md:p-10 shadow-2xl relative overflow-hidden">
                <!-- 卡片背景装饰 -->
                <div class="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-accent/20 rounded-full -ml-24 -mb-24"></div>

                <!-- 标题区域 -->
                <div class="text-center mb-10 relative z-10">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-light text-shadow-lg mb-2">
                        校园墙登录注册
                    </h1>
                    <p class="text-light/80 text-lg text-shadow-lg">欢迎来到校园墙，前方尽是你的世界</p>
                </div>

                <!-- 表单切换区域 -->
                <div class="flex justify-center mb-8 relative z-10">
                    <div class="bg-white/20 rounded-full p-1 flex shadow-md wow data-wow-delay='100ms'">
                        <button @click="loginBt" id="loginBtn" class="btn-q bg-primary text-white">
                            登录
                        </button>
                        <button @click="registerBt" id="registerBtn" class="btn-q bg-transparent text-light">
                            注册
                        </button>
                    </div>
                </div>

                <!-- 表单容器 -->
                <div class="relative z-10">
                    <!-- 登录表单 -->
                    <van-form v-show="deil" :style="hidden" id="loginForm"
                        class="transition-all duration-500 ease-in-out" method="post">
                        <div class="mb-6  wow data-wow-delay='100ms'">
                            <label for="loginEmail" class="block text-light mb-2">账号</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="contact-o"></van-icon>
                                </span>
                                <input name="username" type="text" id="loginEmail"
                                    class=" input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请输入邮箱/号码/QQ号" v-model="username" />
                            </div>
                        </div>

                        <div class="mb-6 wow wow data-wow-delay='200ms'">
                            <label for="loginPassword" class="block text-light mb-2">密码</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="lock"></van-icon>
                                </span>
                                <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" :name="eyes" @click="showPassword"></van-icon>
                                </span>
                                <input name="password" :type="inputType" id="loginPassword"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请输入密码" v-model="password" />
                            </div>
                        </div>

                        <div class="flex justify-between items-center mb-8 wow data-wow-delay='300ms'">
                            <a @click="check" href="#"
                                class="text-light/80 hover:text-light transition-colors a1">忘记密码?</a>
                        </div>

                        <button class="btn-q bg-primary text-white w-full mb-4 hover:bg-primary/90 wow data-wow-delay='400ms'" @click="Login">
                            登录
                        </button>

                    </van-form>

                    <!-- 忘记密码,验证码登录 -->
                    <van-form v-show="!deil" :style="hidden" class="transition-all duration-500 ease-in-out"
                        method="post">
                        <div class="mb-6">
                            <label for="loginEmail2" class="block text-light mb-2">账号</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="envelop-o"></van-icon>
                                </span>
                                <input name="email" type="text" id="loginEmail2"
                                    class=" input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请输入邮箱" v-model="email" />
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="registerCode2" class="block text-light mb-2">验证码</label>
                            <div class="relative flex">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="edit"></van-icon>
                                </span>
                                <input name="code" type="text" id="registerCode2"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20 flex-1"
                                    placeholder="请输入验证码" v-model="code" />
                                <button type="button" id="getCodeBtn"
                                    class="btn-q bg-accent text-white ml-2 px-4 whitespace-nowrap" @click="getCode"
                                    v-if="isDable">
                                    获取验证码
                                </button>
                                <button type="button" id="getCodeBtn"
                                    class="btn-q bg-accent text-white ml-2 px-4 whitespace-nowrap" @click="getCode"
                                    v-else>
                                    {{ times }}s后重新发送
                                </button>
                            </div>
                        </div>

                        <div class="flex justify-between items-center mb-8">
                            <a @click="check" href="#"
                                class="text-light/80 hover:text-light transition-colors a1">返回-></a>
                        </div>

                        <button class="btn-q bg-primary text-white w-full mb-4 hover:bg-primary/90" @click="CodeLogin">
                            登录
                        </button>

                    </van-form>

                    <!-- 注册表单 -->
                    <van-form id="registerForm" class="hidden transition-all duration-500 ease-in-out">
                        <div class="mb-6">
                            <label for="registerUsername" class="block text-light mb-2">用户名</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="contact-o"></van-icon>
                                </span>
                                <input name="username" type="text" id="registerUsername"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请输入用户名" v-model="username" />
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="registerEmail" class="block text-light mb-2">邮箱</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="envelop-o"></van-icon>
                                </span>
                                <input name="email" type="email" id="registerEmail"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请输入邮箱" v-model="email" />
                            </div>
                        </div>

                        <!-- 新增验证码区域 -->
                        <div class="mb-6">
                            <label for="registerCode" class="block text-light mb-2">验证码</label>
                            <div class="relative flex">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="edit"></van-icon>
                                </span>
                                <input name="code" type="text" id="registerCode"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20 flex-1"
                                    placeholder="请输入验证码" v-model="code" />
                                <button type="button" class="btn-q bg-accent text-white ml-2 px-4 whitespace-nowrap"
                                    @click="getCode" v-if="isDable">
                                    获取验证码
                                </button>
                                <button type="button" class="btn-q bg-accent text-white ml-2 px-4 whitespace-nowrap"
                                    @click="getCode" v-else>
                                    {{ times }}s后重新发送
                                </button>
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="registerPassword" class="block text-light mb-2">密码</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="lock"></van-icon>
                                </span>
                                <input type="password" id="registerPassword"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请输入密码" v-model="password" />
                            </div>
                        </div>

                        <div class="mb-8">
                            <label for="registerConfirmPassword" class="block text-light mb-2">确认密码</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" name="lock"></van-icon>
                                </span>
                                <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-light">
                                    <van-icon class="" :name="eyes" @click="showPassword"></van-icon>
                                </span>
                                <input name="requstpassword" :type="inputType" id="registerConfirmPassword"
                                    class="input-q pl-12 bg-white/10 text-light placeholder-white/60 border border-white/20"
                                    placeholder="请再次输入密码" v-model="requstpassword" />
                            </div>
                        </div>

                        <button @click="RegisterSubmit" type="button"
                            class="btn-q bg-accent text-white w-full mb-4 hover:bg-accent/90">
                            注册
                        </button>

                    </van-form>
                </div>
            </div>

            <!-- Q版角色装饰 -->
            <div class="absolute -bottom-10 -left-16 z-20 animate-float">
                <div class="rainbow-border w-36 h-36">
                    <div class="w-full h-full bg-primary rounded-full flex items-center justify-center">
                        <div class="relative animate-spin-slow">
                            <van-icon class=" text-6xl text-white" name="star-o" />
                            <!-- 装饰星星 -->
                            <div class="absolute -top-4 -right-4 text-accent animate-pulse-slow">
                                <van-icon class="" name="star-o" />
                            </div>
                            <div class="absolute -bottom-2 -left-2 text-light animate-pulse-slow"
                                style="animation-delay: 1s">
                                <van-icon class="" name="star-o" />
                            </div>
                            <div class="absolute -top-2 -left-4 text-accent animate-pulse-slow"
                                style="animation-delay: 2s">
                                <van-icon class="" name="star-o" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</template>

<script setup>
import { ref } from 'vue';
import '/public/assets/js/login.js';

const { proxy } = getCurrentInstance()

const hidden = ref("login") // 切换表单现实与隐藏
const deil = ref(true) // 切换登录方式
const isDable = ref(true) // 切换开关
const times = ref(60) // 倒计时时间
const eyes = ref('closed-eye')// 眼睛图标切换
const inputType = ref('password') // 密码输入类型,控制密码是否可见
const password = ref('') // 密码
const username = ref('') // 用户名
const requstpassword = ref('') // 确认密码密码
const code = ref() // 验证码
const email = ref('') // 邮箱
const requstemail = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
const requstqq = /^[1-9]\d{4,12}$/;
const requstphone = /^1[3-9]\d{9}$/;

// 忘记密码
const check = () => {
    deil.value = !deil.value
    email.value = ''
}

// 验证码登录
const CodeLogin = async () => {
    if (!email.value) {
        proxy.$fail('请输入邮箱号')
        return false
    }
    if (!code.value) {
        proxy.$fail('请输入验证码')
        return false
    }
    if (requstemail.test(email.value)) {

    } else {
        proxy.$fail('请输入正确的邮箱号')
        return false
    }

    const data = {
        email: email.value,
        code: code.value,
    }

    const res = await proxy.$http.post({
        url: '/user/codelogin',
        params: data,
    })

    if (res.code === 1) {
        proxy.$success('登录成功')
        //1.5秒后进行跳转
        setTimeout(() => {
            proxy.$router.push({ path: '/user' })
        }, 1500)
    } else {
        proxy.$fail(res.msg)
    }

}

// 登录
const Login = async () => {
    if (!username.value || !password.value) {
        proxy.$fail('账号和密码不能为空')
        return false
    }
    if (requstemail.test(username.value) || requstqq.test(username.value) || requstphone.test(username.value)) {
    } else {
        proxy.$fail('请输入正确的邮箱/号码/QQ号')
        return false
    }

    const data = {
        username: username.value,
        password: password.value,
    }

    const res = await proxy.$http.post({
        url: '/user/login',
        params: data,
    })

    if (res.code === 1) {
        proxy.$success('登录成功')
        //存储user数据
        proxy.$user.value = res.data
        console.log(proxy.$user.value);

        setTimeout(() => {
            proxy.$router.push({ path: '/user' })
        }, 1500)
    } else {
        proxy.$fail(res.msg)
    }

}

// 注册
const RegisterSubmit = async () => {
    if (!username.value || !email.value || !password.value || !requstpassword.value || !code.value) {
        proxy.$fail('请填写完整的注册信息')
        return false
    }
    if (requstemail.test(email.value)) {
    } else {
        proxy.$fail('请输入正确的邮箱号')
        return false
    }
    if (password.value !== requstpassword.value) {
        proxy.$fail('两次输入的密码不一致')
        return false
    }

    const data = {
        username: username.value,
        email: email.value,
        password: password.value,
        requstpassword: requstpassword.value,
        code: code.value,
    }

    const res = await proxy.$http.post({
        url: '/user/register',
        params: data,
    })

    if (res.code === 1) {
        proxy.$success('注册成功')
        //1.5秒后进行跳转
        setTimeout(() => {
            loginBt()
        }, 1500)
    } else {
        proxy.$fail(res.msg)
    }
}

// 验证码发送和倒计时功能
const getCode = async (type) => {
    if (!email.value) {
        proxy.$fail('请输入邮箱号')
        return false
    }
    if (isDable.value === false) {
        proxy.$fail(`验证码已发送,${times.value}s后可重新发送`)
        return false
    } else {
        const data = {
            email: email.value,
            type: hidden.value
        }

        const res = await proxy.$http.post({
            url: '/code/send',
            params: data,
        })

        if (res.code === 1) {
            proxy.$success('验证码发送成功,请注意查收')
        } else {
            proxy.$fail(res.msg)
            return
        }
    }
    isDable.value = false
    // 定时器
    const timer = setInterval(() => {
        times.value--
        if (times.value <= 0) {
            clearInterval(timer) // 清除定时器
            isDable.value = true
            times.value = 60
        }
    }, 1000)

}

// 切换表单
const loginBt = () => {
    hidden.value = 'login'
    username.value = ''
    password.value = ''

    const loginBtn = document.getElementById("loginBtn");
    const registerBtn = document.getElementById("registerBtn");
    const loginForm = document.getElementById("loginForm");
    const registerForm = document.getElementById("registerForm");

    loginBtn.classList.add("bg-primary", "text-white");
    loginBtn.classList.remove("bg-transparent", "text-light");
    registerBtn.classList.add("bg-transparent", "text-light");
    registerBtn.classList.remove("bg-primary", "text-white");

    loginForm.classList.remove("hidden");
    registerForm.classList.add("hidden");
}
const registerBt = () => {
    hidden.value = 'display:none'
    username.value = ''
    password.value = ''
    email.value = ''
    code.value = ''
    requstpassword.value = ''

    const loginBtn = document.getElementById("loginBtn");
    const registerBtn = document.getElementById("registerBtn");
    const loginForm = document.getElementById("loginForm");
    const registerForm = document.getElementById("registerForm");

    registerBtn.classList.add("bg-primary", "text-white");
    registerBtn.classList.remove("bg-transparent", "text-light");
    loginBtn.classList.add("bg-transparent", "text-light");
    loginBtn.classList.remove("bg-primary", "text-white");

    registerForm.classList.remove("hidden");
    loginForm.classList.add("hidden");
}

//密码显示
const showPassword = () => {
    if (eyes.value == 'closed-eye') {
        eyes.value = 'eye-o'
        inputType.value = 'text'
    } else {
        eyes.value = 'closed-eye'
        inputType.value = 'password'
    }
}
</script>

<style>
@import url(/public/assets/css/login.css);
</style>
